<template>
  <div class="container">
    <el-form
      :rules="rules"
      ref="registerForm"
      :model="registerForm"
      class="registerContainer"
    >
      <h3 class="registerTitle"><i class="el-icon-s-custom"></i></h3>
      <el-form-item prop="username">
        <el-input
          prefix-icon="el-icon-user-solid"
          type="text"
          clearable
          v-model="registerForm.username"
          placeholder="请输入用户名"
          size="medium"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="phoneNumber">
        <el-input
          prefix-icon="el-icon-phone"
          type="text"
          clearable
          v-model="registerForm.phoneNumber"
          placeholder="请输入手机号"
          size="medium"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          prefix-icon="el-icon-lock"
          type="password"
          clearable
          v-model="registerForm.password"
          placeholder="请输入密码"
          size="medium"
        >
        </el-input>
      </el-form-item>
      <el-button class="btn-register" plain round type="success" @click="register('registerForm')"
        >注 册</el-button
      >
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      captchaUrl: "",
      registerForm: {
        username: "",
        password: "",
        phoneNumber: "",
      },
      //输入提示，失去焦点就会提示
      //检验规则，
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 5,
            max: 10,
            message: "用户名长度在 5~10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 10,
            message: "密码长度应为 6~10 个字符",
            trigger: "blur",
          },
        ],
        phoneNumber: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "手机号长度为11",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //注册
    register(registerForm) {
      this.$refs[registerForm].validate((valid) => {
        if (valid) {
          this.axios
            .post("http://192.168.253.193:9990/user/register", {
              userName: this.registerForm.username,
              userPwd: this.registerForm.password,
              userPhone: this.registerForm.phoneNumber,
            })
            .then((response) => {
              if (response.data.code === 20000) {
                //使用vue-router 路由到指定页面，该方式称之为编程式导航
                //传参得用name属性
                this.$router.push({
                  path:"/login",
                  query:{
                    userName:this.registerForm.username,
                    //加密密码
                    userPwd: btoa(this.registerForm.password),
                  }
                });
                this.$message.success(response.data.msg);
              } else {
                // console.log(response.data);
                this.$message.error("注册失败");
              }
            });
        } else {
          this.$message.error("注册失败");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: url(/src/assets/3.jpg) no-repeat;
  background-size: cover;
  overflow: hidden;
}
.registerContainer {
  position: relative;
  border-radius: 15px;
  background-clip: padding-box;
  margin: auto;
  margin-top: 130px;
  width: 30%;
  height: 55%;
  padding: 10px 70px 15px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 15px 30px rgba(0,0,0,.5);
}
.registerTitle {
  margin: 0px auto 0px auto;
  text-align: center;
  font-size: 60px;
  color: rgb(103, 194, 58);
}
.btn-register {
  position: absolute;
  margin-top: 3%;
  width: 50%;
  left: 25%;
  font-weight: 600;
}
</style>